<script setup>
import { getProBaseInfo } from '@/api/index.js';
import { useRequest } from '@/hooks/requestHooks';
import InsProTree from './components/InsProTree';
import MonitorArchives from './components/MonitorArchives.vue';
import MonitorSetting from './components/MonitorSetting.vue';
import AssessmentIndicators from './components/AssessmentIndicators.vue';

const activeName = ref('archives');
const enterprise = ref(null);
const projectCode = ref('');
const [res, loading, run] = useRequest(getProBaseInfo, {
  manual: true,
  onSuccess: data => {},
});
const checkedChange = check => {
  enterprise.value = check;
  activeName.value = 'archives';
  run({ enterpriseCode: check?.enterpriseCode });
  // run({ inId: check?.enterpriseCode, projectType: 'TG' });
};
const handleSuccess = code => {
  projectCode.value = code;
  if (!code) run({ enterpriseCode: enterprise?.enterpriseCode });
};
</script>
<template>
  <div class="app-container u-h100 u-df-spb">
    <div class="architecture-left u-h100 u-base-fg u-mr20">
      <InsProTree @checkedChange="checkedChange" :isDefaultSelect="true" type="JC" />
    </div>
    <div class="architecture-right u-h100">
      <el-row class="u-base-fg u-pl20 u-mb20" style="height: 70px; line-height: 70px">
        <el-col :span="6">
          <div class="u-df-st">
            <img class="u-mr5" src="@/assets/images/xm01.png" />
            监测年限：{{ !res?.sDate && !res?.eDate ? '-' : res?.sDate + '&nbsp;' + '-' + '&nbsp;' + res?.eDate }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="u-df-st">
            <img class="u-mr5" src="@/assets/images/xm02.png" />
            投运时间：{{ res?.runTime ?? '-' }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="u-df-st">
            <img class="u-mr5" src="@/assets/images/xm03.png" />
            监测能源类型：{{ res?.energyType ?? '-' }}
          </div>
        </el-col>
      </el-row>
      <div class="u-base-fg" style="height: calc(100% - 90px)">
        <el-tabs v-model="activeName">
          <el-tab-pane label="项目档案" name="archives">
            <MonitorArchives v-if="activeName === 'archives'" type="JC" :enterprise="enterprise" />
          </el-tab-pane>
          <el-tab-pane label="监测设置" name="settings">
            <MonitorSetting v-show="activeName === 'settings'" :enterprise="enterprise" @projectData="handleSuccess" />
          </el-tab-pane>
          <el-tab-pane label="考核指标" name="indicators">
            <AssessmentIndicators
              v-if="activeName === 'indicators'"
              :enterprise="enterprise"
              :projectCode="projectCode"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
::v-deep .el-tabs {
  height: 100%;
  &.el-tabs--top {
    .el-tabs__header {
      margin: 0;
    }
    .el-tabs__content {
      height: calc(100% - 40px);
      .el-tab-pane {
        height: calc(100% - 20px);
      }
    }
    .el-tabs__item.is-top:nth-child(2) {
      padding-left: 20px;
    }
  }
}
</style>
